<template>
    <div>
        <nav>
            <Navbar>
                <img slot="left" src="static/icons/back.png" @click="back">
                <span slot="center">热点旅游</span>
                <img  slot="right" src="static/icons/s1.png" class="img-size" @click="searchClick">
            </Navbar>
        </nav>
        <div id="header-box">
           <div id="header">
                <span class="country-name"  v-for="(v,i) in Traveltitle" @click="searchName(v,i)" :class="isName==i?'co':'co-not'">{{v}}</span>
           </div>
        </div>
    <TripMsg :value="searchCountry" :tripId="tripId"></TripMsg>
        <!--<h3>欧洲</h3>-->
    </div>
</template>

<script>
import TripMsg  from '../components/TripMsg.vue'
import Navbar  from '../components/Navbar.vue'
import {mapState} from "vuex"
export default {
    data:function(){
        return{
            name:"德国",
            change:false,
            isName:-1
        }
    },
    components:{
        TripMsg,
        Navbar,
    },
    mounted:function(){
        this.$store.dispatch("requestTravel");
        this.$store.dispatch("reqestCountryTrip",this.name);
        this.$store.commit("resetArr");
    },
    methods:{
        back(){
            history.back()
        },
        searchName(name,i){
            this.isName=i;
            this.name = name
            this.$store.dispatch("reqestCountryTrip",this.name);
            this.change=true;
        },
        searchClick(){
            this.$router.push({path:"/search"})
        }
        
    },
    computed:{
        ...mapState({
            TravelInfo:state=>state.ninePage.TravelInfo,
            Traveltitle:state=>state.ninePage.Traveltitle,
            searchCountry:state=>state.search.searchCountry,
            tripId:state=>state.search.tripId
        })
    }
}
</script>

<style lang='css' scoped>
    nav{
        background-color: #036ab5;
        color: white;
        width: 100vw;
        overflow-x: hidden;
    }
    nav img{
        width: 35px;
        height: 35px;
        /*border: 1px  solid red;*/
        margin-top: 10px;
    }
    #header-box{
        overflow-x:scroll; 
    }
    #header{
        width: 100vw;
        border-bottom: 1px  solid  #e6e2e2;
        background-color: #fff;
     
    }
    #header span{
        /*border: 1px  solid  red;*/
        display: inline-block;
        height: 53px;
        line-height: 53px;
        width: 70px;
        /*word-break: normal;*/
        text-align: center;
        color: #3d4145;
        font-size: 15px;
    }
    /*#header span:nth-of-type(1){
        color: #036ab5 !important;
        border-bottom: 1px  solid  #036ab5;
    }*/
    .co{
        color: #036ab5 !important;
        border-bottom: 1px  solid  #036ab5;
    }
    .co-not{
        color: blue;
    }
    .img-size{
        width: 30px;
        height: 30px;
        /*border: 1px solid  red;*/
    }
   
</style>